<template>
    <div class="recommend">
<!-- 插槽的使用 -->
    <Card>
    </Card>
   <ul>
       <li
      v-for='(item,index) in recommendList'
            :key='index'
       >
           <h2>
               <img :src="item.imgUrl" alt="">
           </h2>
           <div>
               <h3>{{item.name}}</h3>
               <p>{{item.content}}</p>
               <div class="price">
                   <span>￥</span>
                   <b>{{item.price}}</b>
               </div>
           </div>

       </li>
   </ul>
    </div>
</template>
<script>
import Card from '@/components/home/Card.vue'
// import { component } from 'vue/types/umd'

export default {
    components:{
            Card

        },
    
    data(){
        return{
            recommendList:[
                {
                    id:1,
                    name:'可折叠桌椅',
                    content:'结实稳固，方便且易携带',
                    price:'59',
                    imgUrl:'./images/recommend1.jpg'
                },
                 {
                    id:2,
                    name:'透明TPU果冻包',
                    content:'生活日常出行，有我更配',
                    price:'129',
                    imgUrl:'./images/recommend2.jpg'
                },
            ]

        }
        
    }
}
</script>

<style scoped>
.recommend ul li{
position:relative;
}
.recommend ul li h2{
margin: 0 auto;
width: 97%;
background-color: rgb(053, 103, 083);
border-radius:12px ;
}
.recommend ul li img{
    margin-left: 5px;
    margin-top: 1px;
width: 144px;
height: 144px;
border-radius:12px ;
}
.recommend ul li > div{
position:absolute;
right: 5px;
top:0;

}
.recommend ul li > div{
position:absolute;
right: 5px;
top:0;
display: flex;
flex-direction:column ;
justify-content: space-between;
padding: 20px;

}
.recommend ul li > div h3{
font-size: 12px;
color: rgb(204, 202, 190);
}
.recommend ul li > div p{
    font-size: 14px;
    color:rgb(204, 202, 190);
}
.price{
    color: rgb(241, 193, 133);
    margin-top: 25px;
    text-align: right;

}
.price span{
    font-size: 15px;

}
.price b{
    font-size: 18px;

}

</style>